<template>
	<view class="login-container">
		<!-- 替换波浪为新的顶部装饰 -->
		<view class="header-decoration"></view>

		<!-- 登录表单 -->
		<view class="form-box">
			<view class="title">{{ isLogin ? '欢迎登录' : '账号注册' }}</view>

			<!-- 输入框区域 -->
			<view class="input-group">
				<!-- 登录输入框 -->
				<view class="input-box" v-if="isLogin">
					<input type="tel" v-model="form.username" placeholder="请输入用户名" />
				</view>
				<view class="input-box" v-if="isLogin">
					<input class="uni-input" type="text" v-model="form.password" placeholder="请输入密码"
						:password="showPassword" />
					<view @click="changePassword">
						<uni-icons :type="getIcon()" size="30"></uni-icons>
					</view>
				</view>

				<!-- 注册输入框 -->
				<view class="input-box" v-if="!isLogin">
					<input type="mobile" v-model="form.phone" placeholder="请输入手机号" />
				</view>
				<view class="input-box" v-if="!isLogin">
					<input type="text" v-model="form.username" placeholder="请输入用户名" />
				</view>
				<view class="input-box" v-if="!isLogin">
					<input class="uni-input" type="text" v-model="form.password" placeholder="请输入密码"
						:password="showPassword" />
					<view @click="changePassword">
						<uni-icons :type="getIcon()" size="30"></uni-icons>
					</view>
				</view>
				<view class="input-box" v-if="!isLogin">
					<input class="uni-input" type="text" v-model="form.confirmPassword" placeholder="请确认密码"
						:password="showPassword" />
					<view @click="changePassword">
						<uni-icons :type="getIcon()" size="30"></uni-icons>
					</view>
				</view>

				<!-- 隐私政策确认 -->
				<view class="privacy-box">
					<checkbox-group @change="handlePrivacyChange">
						<checkbox :checked="form.agreePrivacy" style="transform:scale(0.7)" />
					</checkbox-group>
					<text class="privacy-text">我已阅读并同意</text>
					<text class="privacy-link" @click="showPrivacyPolicy">《隐私政策》</text>
				</view>
			</view>

			<!-- 按钮区域 -->
			<view class="btn-group">
				<button class="submit-btn" @click="submit">
					{{ isLogin ? '登 录' : '注 册' }}
				</button>
				<view class="action-links">
					<text class="forget-pwd" v-if="isLogin" @click="goToForgetPwd">忘记密码？</text>
					<text class="switch-type" @click="switchLoginType">
						{{ isLogin ? '没有账号？去注册' : '已有账号？去登录' }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { logoutAPI } from '@/services/login'
	import type { LoginParams, RegisterParams } from '../../types/login'
	import { SECRET_KEY } from '@/utils/config'
	import { onLoad } from '@dcloudio/uni-app'
	import CryptoJS from 'crypto-js'
	import { ref } from 'vue'
	import { getToken, getUserInfos, registerUser, clearUser } from '@/stores/user'

	//展示密码
	const showPassword = ref(false)
	//查看密码
	const changePassword = () => {
		showPassword.value = !showPassword.value
	}
	// 切换密码图标
	const getIcon = () => {
		return showPassword.value ? 'eye' : 'eye-slash'
	}
	// 是登录还是注册
	const isLogin = ref(true)
	/**
	 * 表单数据
	 */
	const form = ref({
		phone: '18156548135',
		username: 'zhangfei',
		password: '123456',
		confirmPassword: '123456',
		agreePrivacy: true
	})

	/**
	 * 切换登录/注册类型
	 */
	const switchLoginType = () => {
		isLogin.value = !isLogin.value
		// 重置表单数据
		form.value = {
			phone: form.value.phone,
			username: form.value.username,
			password: form.value.password,
			confirmPassword: form.value.confirmPassword,
			agreePrivacy: form.value.agreePrivacy
		}
	}




	/**
	 * 隐私政策选择变化处理
	 */
	const handlePrivacyChange = (e : any) => {
		form.value.agreePrivacy = e.detail.value.length > 0
	}
	/**
	 * 显示隐私政策
	 */
	const showPrivacyPolicy = () => {
		// 显示隐私政策
		uni.showModal({
			title: '隐私政策',
			content: '这里是隐私政策内容...',
			showCancel: false
		})
	}

	const submit = async () => {
		if (isLogin.value) {
			await login()
		} else {
			await register()
		}
	}


	/**
	 * 登录
	 */
	const login = async () => {
		console.log("login")
		clearToken()
		// 1.添加隐私政策验证（移到最前面）
		if (!form.value.agreePrivacy) {
			uni.showToast({
				title: '请同意隐私政策',
				icon: 'none'
			})
			return
		}

		// 2.对密码进行加密
		const encPassword = encryptPassword(form.value.password)

		// 3.构造登录参数
		const loginParams : LoginParams = {
			username: form.value.username,
			password: encPassword,
			grant_type: 'password',
			scope: 'server',
		}
		// 4.获取 token
		await getToken(loginParams)

		// 5.查询个人信息
		await getUserInfos()

		// 6.登录成功后，跳转到首页
		uni.showToast({
			title: isLogin.value ? '登录成功' : '注册成功',
			icon: 'success'
		})

		// 7.登录成功后，跳转到首页
		uni.switchTab({
			url: '/pages/bookstore/index'
		})
	}






	/**
	 * 注册`
	 */
	const register = () => {
		console.log("register")
		//1注册信息
		const registerParams : RegisterParams = {
			username: form.value.username,
			password: form.value.password,
			phone: form.value.phone
		}
		//2.注册
		registerUser(registerParams)

		//3.注册成功
		uni.showToast({
			title: '注册成功',
			icon: 'success'
		})
		// 4.注册成功后，跳转到登录页
		switchLoginType()


	}


	/**
	 * 清理缓存token
	 */
	const clearToken = async () => {
		//1.前端token缓存清除
		clearUser()
		//2.后端token清除
		await logoutAPI()
	}


	/**
	 * 对密码进行加密
	 */
	const encryptPassword = (password : string) => {
		const CRYPTO_KEY = CryptoJS.enc.Utf8.parse(SECRET_KEY)
		const encrypted = CryptoJS.AES.encrypt(password, CRYPTO_KEY, {
			iv: CRYPTO_KEY,
			mode: CryptoJS.mode.CFB,
			padding: CryptoJS.pad.NoPadding
		})
		return encrypted.toString()
	}


	/**
	 * 忘记密码
	 */
	const goToForgetPwd = () => {
		uni.navigateTo({
			url: '/pages/login/forget-password'
		})
	}
	/**
	 * 页面加载时清理缓存
	 */
	onLoad(async () => {

		//清理缓存token
		// await clearToken()

		//自动登录
		await login()


	})
</script>
<style lang="scss" scoped>
	/* stylelint-disable */
	.login-container {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: #f5f6fa;
		padding: 0 40rpx;

	}

	// 删除旧的.wave-box相关样式，添加新的顶部装饰样式
	.header-decoration {
		height: 420rpx;
		background: linear-gradient(135deg, #6B8DE3, #7C5CBF);
		margin: 0 -40rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: -60rpx;
			left: 0;
			right: 0;
			height: 120rpx;
			background: #f5f6fa;
			border-radius: 50% 50% 0 0;
			transform: scaleX(1.5);
		}
	}

	.form-box {
		margin-top: -180rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 30rpx;
		padding: 60rpx 60rpx;
		box-shadow: 0 10rpx 50rpx rgba(114, 130, 183, 0.15),
			0 0 20rpx rgba(114, 130, 183, 0.08);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.9);

		.title {
			font-size: 40rpx;
			font-weight: 600;
			text-align: center;
			margin-bottom: 80rpx;
			background: linear-gradient(135deg, #6B8DE3, #7C5CBF);
			-webkit-background-clip: text;
			color: transparent;
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.05);
		}
	}

	.input-group {
		margin: 0;

		.input-box {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 16rpx;
			margin-bottom: 40rpx;
			padding: 24rpx 40rpx;
			box-shadow: inset 0 2rpx 8rpx rgba(114, 130, 183, 0.08),
				0 2rpx 4rpx rgba(255, 255, 255, 0.9);
			border: 1px solid rgba(114, 130, 183, 0.15);
			transition: all 0.3s ease;

			&:last-child {
				margin-bottom: 20rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #4A5568;
				padding: 4rpx 0;

				&::placeholder {
					color: #A0AEC0;
				}
			}
		}

		.code-box {
			position: relative;

			.code-btn {
				position: absolute;
				right: 40rpx;
				color: #6B8DE3;
				font-size: 26rpx;
				padding: 10rpx 0 10rpx 30rpx;
				border-left: 1px solid rgba(114, 130, 183, 0.2);

				&.disabled {
					color: #A0AEC0;
				}
			}
		}
	}

	.btn-group {
		margin-top: 50rpx;
		padding: 0;

		.submit-btn {
			background: linear-gradient(135deg, #6B8DE3, #7C5CBF);
			color: #fff;
			border: none;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 8rpx;
			box-shadow: 0 8rpx 20rpx rgba(107, 141, 227, 0.25);
			transition: all 0.3s ease;
			width: 85%;
			margin: 0 auto;



			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 10rpx rgba(107, 141, 227, 0.15);
				opacity: 0.95;
			}
		}

		.action-links {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;

			.forget-pwd {
				font-size: 26rpx;
				color: #6B8DE3;
				padding: 20rpx;
				margin-right: 40rpx;

				&:active {
					opacity: 0.8;
				}
			}

			.switch-type {
				font-size: 26rpx;
				color: #6B8DE3;
				padding: 20rpx;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}

	.privacy-box {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-top: -20rpx;

		.privacy-text {
			font-size: 24rpx;
			color: #666;
			margin-left: -10rpx;
		}

		.privacy-link {
			font-size: 24rpx;
			color: #6B8DE3;
		}
	}
</style>